<template>
  <div class="home-container">
    <div class="home-header">
      <h2>欢迎使用贷后管理系统</h2>
      <p>高效管理贷后案件，提升工作效率</p>
    </div>
    
    <!-- 快捷导航区域 -->
    <div class="quick-navigation">
      <h3>快捷导航</h3>
      <div class="nav-cards">
        <!-- caimeng 账号快捷导航 -->
        <template v-if="currentMenuPermissions === 'caimeng'">
          <div class="nav-card" @click="navigateTo('/review-list')">
            <div class="nav-icon"><file-done-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">审核</div>
              <div class="nav-desc">案件审核管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/entrust-list')">
            <div class="nav-icon"><team-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">委案</div>
              <div class="nav-desc">委托案件管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/withdrawal-case-list')">
            <div class="nav-icon"><team-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">撤委案</div>
              <div class="nav-desc">撤委案管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/excel-split/citic')">
            <div class="nav-icon"><table-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">中信银行分表</div>
              <div class="nav-desc">Excel分表工具</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/excel-split/pingan')">
            <div class="nav-icon"><table-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">平安银行分表</div>
              <div class="nav-desc">Excel分表工具</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/excel-split/yingtan')">
            <div class="nav-icon"><table-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">鹰潭制表</div>
              <div class="nav-desc">Excel分表工具</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/scheduled-task')">
            <div class="nav-icon"><clock-circle-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">定时任务执行</div>
              <div class="nav-desc">任务调度管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/profile')">
            <div class="nav-icon"><user-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">个人中心</div>
              <div class="nav-desc">个人信息管理</div>
            </div>
          </div>
        </template>
        
        <!-- caimengmeng 账号快捷导航 -->
        <template v-else-if="currentMenuPermissions === 'caimengmeng'">
          <div class="nav-card" @click="navigateTo('/case-distribution-list')">
            <div class="nav-icon"><appstore-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">分案</div>
              <div class="nav-desc">案件分配管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/profile')">
            <div class="nav-icon"><user-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">个人中心</div>
              <div class="nav-desc">个人信息管理</div>
            </div>
          </div>
        </template>
        
        <!-- 其他账号快捷导航 -->
        <template v-else>
          <div class="nav-card" @click="navigateTo('/record-case-list')">
            <div class="nav-icon"><file-add-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">录案</div>
              <div class="nav-desc">案件录入管理</div>
            </div>
          </div>
          <div class="nav-card" @click="navigateTo('/profile')">
            <div class="nav-icon"><user-outlined /></div>
            <div class="nav-content">
              <div class="nav-title">个人中心</div>
              <div class="nav-desc">个人信息管理</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/user';
import { organizationManager } from '../config/organization-manager';
import {
  FileDoneOutlined,
  TeamOutlined,
  AppstoreOutlined,
  TableOutlined,
  ClockCircleOutlined,
  UserOutlined,
  FileAddOutlined
} from '@ant-design/icons-vue';

const router = useRouter();
const userStore = useUserStore();

// 当前用户的菜单权限
const currentMenuPermissions = ref<string>('default');

// 计算菜单权限
const calculateMenuPermissions = () => {
  const currentAccount = userStore.userInfo?.accountNo;
  
  if (currentAccount) {
    const currentOrg = organizationManager.getAllOrganizations().find((org: any) => org.account === currentAccount);
    currentMenuPermissions.value = currentOrg?.menuPermissions || 'default';
  } else {
    currentMenuPermissions.value = 'default';
  }
};

// 导航到指定页面
const navigateTo = (path: string) => {
  router.push(path);
};

// 组件挂载时计算权限
onMounted(() => {
  calculateMenuPermissions();
});
</script>

<style scoped>
.home-container {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.home-header {
  margin-bottom: 32px;
  text-align: center;
}

.home-header h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

.home-header p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.quick-navigation {
  margin-bottom: 32px;
}

.quick-navigation h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.nav-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
}

.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
  background-color: #f0f8ff;
}

.nav-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 16px;
  flex-shrink: 0;
}

.nav-content {
  flex: 1;
  min-width: 0;
}

.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.nav-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-cards {
    grid-template-columns: 1fr;
  }
  
  .nav-card {
    padding: 16px;
  }
  
  .nav-icon {
    font-size: 20px;
    margin-right: 12px;
  }
  
  .nav-title {
    font-size: 15px;
  }
  
  .nav-desc {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .home-container {
    padding: 16px;
  }
  
  .home-header h2 {
    font-size: 20px;
  }
  
  .home-header p {
    font-size: 14px;
  }
}
</style>